import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  FormControl
} from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-alter-taoti-detail',
  templateUrl: './alter-taoti-detail.component.html',
  styleUrls: ['./alter-taoti-detail.component.css']
})
export class AlterTaotiDetailComponent implements OnInit {
  validateForm: FormGroup;
  question: any;
  id = 0;
  type = '';
  taoti = 0;

  constructor(private fb: FormBuilder,
    private http: HttpClient,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe((params) => {
      this.id = params.id;
      this.taoti = params.taoti;
      this.type = params.type;
      if (this.id != null) {
        let getUrl = '';
        if (this.type == '单选') {
          getUrl = `/api/OnlyQuestions/findById?aLong=${this.id}`;
        } else if (this.type == '多选') {
          getUrl = `/api/ServeralQuestions/findById?aLong=${this.id}`;
        } else if (this.type == '填空') {
          getUrl = `/api/FillingQuestions/findById?aLong=${this.id}`;
        } else if (this.type == '编程') {
          getUrl = `/api/ProgrammerQuestions/findById?aLong=${this.id}`;
        }
        this.http
          .get(getUrl)
          .subscribe(response => {
            this.question = response;
            console.log(this.question);
            this.initForm();
          });
      }
    });
    this.initForm();
  }

  initForm() {
    if (this.question == null) {
      this.validateForm = this.fb.group({
        question: [null, [Validators.required]],
        type: [null],
        count: [null],
        optionA: [null],
        optionB: [null],
        optionC: [null],
        optionD: [null],

        answer: [null],
        answerA: [null],
        answerB: [null],
        answerC: [null],
        answerD: [null],
        grade: [null],
        note: [null]
      });
    } else {
      this.validateForm = this.fb.group({
        question: [this.question.question, [Validators.required]],
        type: [this.question.type],
        count: [this.question.count],
        optionA: [this.question.optionA],
        optionB: [this.question.optionB],
        optionC: [this.question.optionC],
        optionD: [this.question.optionD],

        answer: [this.question.answer],
        answerA: [this.question.answerA],
        answerB: [this.question.answerB],
        answerC: [this.question.answerC],
        answerD: [this.question.answerD],
        grade: [this.question.grade],
        note: [this.question.note]
      });
    }
  }

  _submitForm() {
    for (const i in this.validateForm.controls) {
      if (i) {
        this.validateForm.controls[i].markAsDirty();
      }
    }
    if (this.validateForm.status !== 'VALID') {
      return;
    }
    this.validateForm.value.id = this.id;
    this.validateForm.value.taotiID = this.taoti;
    console.log(this.validateForm.value);

    let saveUrl = '';
    if (this.type == '单选') {
      saveUrl = `/api/OnlyQuestions/save`;
    } else if (this.type == '多选') {
      saveUrl = `/api/ServeralQuestions/save`;
    } else if (this.type == '填空') {
      saveUrl = `/api/FillingQuestions/save`;
    } else if (this.type == '编程') {
      saveUrl = `/api/ProgrammerQuestions/save`;
    }
    this.http
      .post(saveUrl, JSON.stringify(this.validateForm.value), {
        headers: new HttpHeaders({
          'Content-type': 'application/json'
        })
      })
      .subscribe(response => {
        response = response as boolean;
        if (response) {
          this.router.navigate([`/content/taotiDetail/${this.taoti}`]);
        }
      });
  }

  getFormControl(name) {
    return this.validateForm.controls[name];
  }

}
